<template>
  <div class="addFileTrain" style="background-color: #fcfcfc">
    <a-row :wrap="false" :gutter="10">
      <a-col flex="260px">
        <a-card style="width: 100%">
          <div>
            <strong style="font-size: 20px; line-height: 1.75rem; color: black"> 选择变量 </strong>
          </div>
          <a-divider style="margin-bottom: 10px; margin-top: 10px" />
          <div class="variables">
            <VueDraggable
              style="height: 100%; "
              v-model="mockData"
              animation="150"
              ghostClass="ghost"
              group="people"
              @update="onUpdate"
              @add="onAdd"
              @remove="remove"
            >
              <div
                class="variablesItem"
                v-for="item in mockData"
                :key="item.columnNumber"
              >
                {{ item.name }}
              </div>
            </VueDraggable>
          </div>
        </a-card>
      </a-col>
      <a-col flex="auto">
        <a-card>
          <div>
            <strong style="font-size: 20px; line-height: 1.75rem; color: black">
              创建参数填写
            </strong>
          </div>
          <a-divider style="margin-bottom: 10px; margin-top: 10px; " />
          <div style="margin-bottom: 16px">填写模型简介</div>
          <a-input
            v-model:value="fileForm.introduction"
            placeholder="请输入模型简介"
            allow-clear
          />

          <div style="margin-bottom: 16px" />

          <div style="margin-bottom: 16px">选择目标变量(单目标):</div>
          <div style="height: 60px; overflow: auto; margin: auto; border: #cecece dotted;position: relative;">
            <div class="dec" v-if="!targetList?.length">
              拖入目标变量
            </div>
            <VueDraggable
              style="height: 100%; "
              v-model="targetList"
              animation="150"
              group="people"
              ghostClass="ghost"
              @update="onUpdate"
              @add="onAdd"
              @remove="remove"
            >
              <div
                class="variablesItem"
                v-for="item in targetList"
                :key="item.columnNumber"
              >
                {{ item.name }}
              </div>
            </VueDraggable>
          </div>
          <div style="margin-bottom: 16px" />
          <div style="margin-bottom: 16px">选择目标变量:</div>
          <div style="height: 300px; overflow: auto; margin: auto; border: #cecece dotted;position: relative;">
            <div class="dec" v-if="!featureList?.length">
              拖入特征变量
            </div>
            <VueDraggable
              style="height: 100%; "
              v-model="featureList"
              animation="150"
              group="people"
              ghostClass="ghost"
              @update="onUpdate"
              @add="onAdd"
              @remove="remove"
            >
              <div
                class="variablesItem"
                v-for="item in featureList"
                :key="item.columnNumber"
              >
                {{ item.name }}
              </div>
            </VueDraggable>
          </div>

          <div style="margin-bottom: 16px" />
<!--          其他参数-->
          <a-row :wrap="false">
            <a-col flex="auto">
              选择模型:
              <a-select
                style="width: 100px"
                ref="select"
                v-model:value="fileForm.model"
                placeholder="请输入分类"
                allow-clear
              >
                <a-select-option value="KNN">KNN</a-select-option>
                <a-select-option value="KELM">KELM</a-select-option>
                <a-select-option value="SVM">SVM</a-select-option>
                <a-select-option value="FKNN">FKNN</a-select-option>
              </a-select>
            </a-col>
            <a-col flex="auto">
              训练占比:
              <a-input-number style="width: 100px;" v-model:value="fileForm.trainRate" :min="10" :max="90" />%
            </a-col>
            <a-col flex="auto">
              数据洗牌：
              <a-select
                style="width: 100px"
                ref="select"
                v-model:value="fileForm.isRefresh"
                allow-clear
              >
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>

            </a-col>

          </a-row>
          <div style="margin-bottom: 16px"/>
          <a-button style="width: 100%" type="primary" @click="onCreateModel">创建模型</a-button>
        </a-card>
<!--        {{ fileForm}}-->
      </a-col>
    </a-row>



<!--    <div>{{ getFilter(mockData) }}</div>-->
<!--    <div>{{ getFilter(targetList) }}</div>-->
<!--    <div>{{ getFilter(featureList) }}</div>-->
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { listFileVariablesVoByPageUsingPost } from '@/api/fileVariablesController.ts'
import { useRoute, useRouter } from 'vue-router'
import { VueDraggable } from 'vue-draggable-plus'
import { useDraggable } from 'vue-draggable-plus'
import { message } from 'ant-design-vue'
import { editFileUsingPost } from '@/api/fileController.ts'
import { addFileTrainUsingPost } from '@/api/fileTrainController.ts'

const mockData = ref<API.FileVariablesVO[]>([])
const targetList = ref<API.FileVariablesVO[]>([])
const featureList = ref<API.FileVariablesVO[]>([])
const route = useRoute()

const router = useRouter()

const variablesTotal = ref(0)
const fileForm = reactive<API.FileTrainAddRequest>({
  model: "KNN",
  trainRate:70,
  isRefresh: 0,
})

const searchVariablesParams = reactive<API.FileVariablesQueryRequest>({
  current: 1,
  pageSize: 1000000,
  sortField: 'columnNumber',
  sortOrder: 'ascend',
}) // 局部更新



const getFileVariables = async () => {
  // 获取到id
  const id = route.query?.fileId
  if(id) {
    searchVariablesParams.fileId = id
    fileForm.fileId = id;
    const res = await listFileVariablesVoByPageUsingPost(searchVariablesParams)
    if (res.data.code === 0 && res.data.data) {
      mockData.value = res.data.data.records ?? []
      variablesTotal.value = res.data.data.total ?? 0
    }
  } else {
    message.info("请传入相应的文件id,或从对应文件入口进入页面")
  }


}

const getFilter = (data: API.FileVariablesVO[]) => {
  // console.log(data)
  return data.map((data: API.FileVariablesVO) => {return data.columnNumber-1})
}

onMounted(() => {
  getFileVariables()
})

// ---------------------
function onUpdate() {
  console.log('update')
}
function onAdd() {
  console.log('add')
}
function remove() {
  console.log('remove')
}

const onCreateModel = async () => {
  const id = route.query?.fileId
  if(id) {
    fileForm.selectFeatures = getFilter(featureList.value)
    fileForm.selectTargets = getFilter(targetList.value)
    fileForm.fileId = id

    const res = await addFileTrainUsingPost(fileForm)
    // 操作成功
    if (res.data.code === 0 && res.data.data) {
      message.success('创建成功')
      router.push({
        path: `/file/${fileForm.fileId}`,
      })
    } else {
      message.error('创建失败，' + res.data.message)
    }
  }else{
    message.info("请传入相应的文件id,或从对应文件入口进入页面")
  }
}
</script>

<style scoped>
.addFileTrain {
  margin: 0 auto;
  width: 70%;
}
.p-3 {
  padding: 0.75rem;
}
.rounded {
  border-radius: 0.25rem;
}
.h-30 {
  height: 7.5rem;
}
.variables {
  overflow: auto;
  margin: auto;
  height: 700px;
}
.variablesItem {
  font-size: 15px;
  padding: 10px 0 10px 20px;
  cursor: move;
  background-color: white;
}
.variablesItem:hover {
  background-color: rgba(107, 114, 128, 0.05);
}
.dec {
  color: #bbb;
  position: absolute;
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 通过偏移调整，使文字完全居中 */
}
</style>
